<template>
  <div>
    <vue-ueditor-wrap
      v-model="val"
      :config="ueConfig"
      @change="onEditorChange()"
    ></vue-ueditor-wrap>
  </div>
</template>

<script>
import VueUeditorWrap from "vue-ueditor-wrap"; // ES6 Module
export default {
  props: {
    detail: {
      type: String,
      default: "",
    },
    url: {
      type: String,
      default: "",
    },
  },
  components: {
    VueUeditorWrap,
  },
  data() {
    return {
      val: null,
    };
  },
  computed: {
    ueConfig() {
      return {
        headers: {
          token: "jasdawsd",
        },
        UEDITOR_HOME_URL: "/UEditor/",
        imageActionName: "uploadImage",
        serverUrl: this.url,
        toolbars: [
          [
            "undo", //撤销
            "bold", //加粗
            "indent", //首行缩进
            "italic", //斜体
            "underline", //下划线
            "strikethrough", //删除线
            "subscript", //下标
            "fontborder", //字符边框
            "superscript", //上标
            "formatmatch", //格式刷
            "fontfamily", //字体
            "fontsize", //字号
            "justifyleft", //居左对齐
            "justifycenter", //居中对齐
            "justifyright", //居右对齐
            "justifyjustify", //两端对齐
            "insertorderedlist", //有序列表
            "insertunorderedlist", //无序列表
            "lineheight", //行间距
          ],
        ],
        toolbars: [
          [
            "fullscreen",
            "source",
            "|",
            "undo",
            "redo",
            "|",
            "bold",
            "italic",
            "underline",
            "fontborder",
            "strikethrough",
            "superscript",
            "subscript",
            "removeformat",
            "formatmatch",
            "autotypeset",
            "blockquote",
            "pasteplain",
            "|",
            "forecolor",
            "backcolor",
            "insertorderedlist",
            "insertunorderedlist",
            "selectall",
            "cleardoc",
            "|",
            "rowspacingtop",
            "rowspacingbottom",
            "lineheight",
            "|",
            "customstyle",
            "paragraph",
            "fontfamily",
            "fontsize",
            "|",
            "directionalityltr",
            "directionalityrtl",
            "indent",
            "|",
            "justifyleft",
            "justifycenter",
            "justifyright",
            "justifyjustify",
            "|",
            "touppercase",
            "tolowercase",
            "|",
            "link",
            "unlink",
            "anchor",
            "|",
            "imagenone",
            "imageleft",
            "imageright",
            "imagecenter",
            "|",
            // "simpleupload",
            "insertimage",
            "emotion",
            "scrawl",
            // "insertvideo",
            "music",
            // "attachment",
            "map",
            "insertframe",
            "insertcode",
            "webapp",
            "pagebreak",
            "template",
            "background",
            "|",
            "horizontal",
            "date",
            "time",
            "spechars",
            "snapscreen",
            "wordimage",
            "|",
            "inserttable",
            "deletetable",
            "insertparagraphbeforetable",
            "insertrow",
            "deleterow",
            "insertcol",
            "deletecol",
            "mergecells",
            "mergeright",
            "mergedown",
            "splittocells",
            "splittorows",
            "splittocols",
            "charts",
            "|",
            "print",
            "preview",
            "searchreplace",
            "drafts",
            "help",
          ],
        ],
        fontfamily: [
          { label: "", name: "songti", val: "宋体,SimSun" },
          { label: "仿宋", name: "fangsong", val: "仿宋,FangSong" },
          {
            label: "仿宋_GB2312",
            name: "fangsong",
            val: "仿宋_GB2312,FangSong",
          },
          { label: "", name: "kaiti", val: "楷体,楷体_GB2312, SimKai" },
          { label: "", name: "yahei", val: "微软雅黑,Microsoft YaHei" },
          { label: "", name: "heiti", val: "黑体, SimHei" },
          { label: "", name: "lishu", val: "隶书, SimLi" },
          { label: "", name: "andaleMono", val: "andale mono" },
          { label: "", name: "arial", val: "arial, helvetica,sans-serif" },
          { label: "", name: "arialBlack", val: "arial black,avant garde" },
          { label: "", name: "comicSansMs", val: "comic sans ms" },
          { label: "", name: "impact", val: "impact,chicago" },
          { label: "", name: "timesNewRoman", val: "times new roman" },
        ],
        autoHeightEnabled: false, // 编辑器不自动被内容撑高
        // 初始容器高度
        initialFrameHeight: 300,
        // 初始容器宽度
        initialFrameWidth: "100%",
        // 上传文件接口
        imageAllowFiles: [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
        /*        imageCompressBorder: 1600,
        imageCompressEnable: true,
        imageFieldName: "file",
        imageInsertAlign: "none",
        imageMaxSize: 20480000,
        imagePathFormat: "/ueditor/image/{yyyy}{mm}{dd}/{time}{rand:6}", */
        enableAutoSave: false,
        elementPathEnable: true,
        wordCount: true, //关闭字数统计
      };
    },
  },
  mounted() {
    this.val = this.detail;
  },
  watch: {
    val(o, n) {
      this.$emit("input", o);
    },
  },
};
</script>

<style lang="scss" scoped></style>
